<template>
    <div class="filter-panel">
        <a-row class="tag-list" type="flex" align="middle">
            <a-col
                v-for="(v, k) in categoryList"
                :key="v.key"
                :class="v.checked ? 'tab checked' : 'tab normal'"
                @click="clickTab(k)"
            >
                {{ v.label }}
            </a-col>
            <a-col style="margin-left: 10px;">
                <a-checkbox @change="setMultiSelect">
                    多选
                </a-checkbox>
            </a-col>
        </a-row>
        <a-divider></a-divider>
        <a-row class="icon-sort" type="flex" align="middle" :gutter="10">
            <a-col @click="setSortType">
                <a-icon :type="sortType" class="icon" />
                <span>{{ sortType == 'sort-ascending' ? '升序' : '降序' }}</span>
            </a-col>
            <a-col><a-divider type="vertical" /></a-col>
            <a-col>
                <a-radio-group name="radioGroup" default-value="time">
                    <a-radio :value="v.value" v-for="(v, k) in radioList" :key="k" @click="radioClick(v)">
                        {{ v.label }}
                    </a-radio>
                </a-radio-group>
            </a-col>
        </a-row>
    </div>
</template>
<script>
    import moment from 'moment'
    export default {
        name: 'FilterPanel',
        data() {
            return {
                categoryList: [],
                radioList: [
                    { label: '按添加时间排序', value: 'time' },
                    { label: '按评价排序', value: 'rate' },
                ],
                radioVal: 'time',
                curCategoryList: [], // 当前选中的类别标签
                multiSelect: false,
                radioSelectKey: 0, // 单选选中的key
                sortType: 'sort-ascending',
            }
        },
        methods: {
            setSortType() {
                this.sortType = this.sortType == 'sort-ascending' ? 'sort-descending' : 'sort-ascending'
            },
            setMultiSelect() {
                const { multiSelect, categoryList } = this
                // 多选变单选
                if (multiSelect) {
                    this.$set(this.categoryList, 0, { ...categoryList[0], checked: true })
                    for (let i = 1; i < categoryList.length; i++) {
                        this.$set(this.categoryList, i, { ...categoryList[i], checked: false })
                    }
                }
                this.multiSelect = !multiSelect
            },
            clickTab(k) {
                const { multiSelect, categoryList, radioSelectKey } = this
                if (multiSelect) {
                    // 不选择全部
                    if (k != 0) {
                        this.$set(this.categoryList, 0, { ...categoryList[0], checked: false })
                    } else {
                        for (let i = 1; i < categoryList.length; i++) {
                            this.$set(this.categoryList, i, { ...categoryList[i], checked: false })
                        }
                    }
                    this.$set(this.categoryList, k, {
                        ...categoryList[k],
                        checked: k == 0 ? true : !categoryList[k].checked,
                    })
                } else {
                    this.$set(this.categoryList, radioSelectKey, {
                        ...categoryList[radioSelectKey],
                        checked: false,
                    })
                    this.$set(this.categoryList, k, { ...categoryList[k], checked: true })
                    this.radioSelectKey = k
                }
            },
            radioClick({ value }) {
                if (this.radioVal !== value) this.radioVal = value
            },
            sortVideo() {
                const { sortType, radioVal } = this
                let { videoList } = this.$store.state.videos
                if (radioVal == 'time') {
                    videoList = videoList.sort((a, b) => {
                        const val = moment(a.addDate).isBefore(moment(b.addDate)) ? 1 : -1
                        return sortType == 'sort-ascending' ? val : -val
                    })
                } else if (radioVal == 'rate') {
                    videoList = videoList.sort((a, b) => {
                        return sortType == 'sort-ascending' ? a.score - b.score : b.score - a.score
                    })
                }
                this.$store.commit('videos/setVideoList', videoList)
            },
        },
        watch: {
            '$store.state.videos.videoList': {
                handler(nval) {
                    let categoryList = new Set()
                    for (const { category } of nval) {
                        for (const v of category) categoryList.add(v)
                    }
                    categoryList = Array.from(categoryList)
                    categoryList = categoryList.sort((a, b) => {
                        return a.localeCompare(b)
                    })
                    categoryList.unshift('全部')
                    for (const i in categoryList) {
                        this.$set(this.categoryList, i, { label: categoryList[i], checked: i == 0, key: i })
                    }
                    this.$store.commit('videos/setCategoryList', categoryList)
                },
                deep: true,
                immediate: true,
            },
            categoryList: {
                handler(nval) {
                    const list = nval.reduce((prev, cur) => {
                        if (cur.checked) prev.push(cur.label)
                        return prev
                    }, [])
                    this.curCategoryList = []
                    for (const i in list) {
                        this.$set(this.curCategoryList, i, list[i])
                    }
                    this.$emit('filterVideoList', this.curCategoryList)
                },
                deep: true,
            },
            sortType() {
                this.sortVideo()
            },
            radioVal() {
                this.sortVideo()
            },
        },
    }
</script>
<style scoped lang="less">
    .filter-panel {
        width: 100%;
        margin-bottom: 20px;
        .tag-list {
            width: 100%;
            .tab {
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 3px 10px;
                margin: 5px 2px;
                font-size: 15px;
                border-radius: 5px;
                user-select: none;
            }
            .normal {
                background: white;
                color: black;
            }
            .checked {
                background: #1890ff;
                color: white;
            }
        }

        .icon-sort {
            font-size: 14px;
            user-select: none;
            .icon {
                margin-right: 5px;
            }
            /deep/ .ant-divider-vertical {
                background: #e8e8e8;
                width: 2px;
                height: 20px;
            }
        }
        /deep/ .ant-divider-horizontal {
            margin: 10px 0px;
        }
    }
</style>
